<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content_box pd-30" v-if="Object.keys(detail).length > 0">
			<view class="bg  bd-r40 pd-30">
				<view class="card_box flex-c-center">
					<image class="imgs bd-r40" :src="detail.cover" mode="aspectFill">
					</image>
					<view class="ft-32 c-33 fw-800 mt-20">{{ detail.name }}</view>
					<view class="ft-20 c-33  mt-20">
						{{ '价值￥' }}
						<span class="ft-num3 c-33">{{ detail.exchange_price }}</span>
						元
					</view>
				</view>
				<view class="form_box">
					<view class="form_box_item flex-bwt pd-20">
						<view class="label">所需积分 </view>
						<view class="rig ft-24"> <span class="intefral_num">{{ detail.total_integral }}</span> </view>
					</view>
					<view class="form_box_item flex-bwt pd-20">
						<view class="label">兑换数量 </view>
						<view class="rig ft-24 c-66">
							{{ detail.num }}
						</view>
					</view>
					<view class="form_box_item flex-bwt pd-20">
						<view class="label">兑换单号 </view>
						<view class="rig ft-24 c-66 flex">
							<up-copy :content="detail.ordernum">
								<text class="btnItem">复制</text>
							</up-copy>
							{{ detail.ordernum }}
						</view>
					</view>
					<view class="form_box_item flex-bwt pd-noR">
						<view class="label">收货地址 </view>
						<view class="rig">
							<view class="selectAdd">
								<span class="te-3 ft-24 c-66">{{ detail.address_name + ' ' + detail.address_phone
									}}</span><br />
								<span class="te-3 ft-24 c-66">{{ detail.address_area.join('') + detail.address_addr
								}}</span>
							</view>
						</view>
					</view>
					<view class="form_box_item">
						<view class="title  flex-bwt  pd-20">
							<view class="label">物流信息 </view>
							<view class="rig">
								<view class="selectAdd flex-center ft-24 fw-800 c-33">
									<span class="te-3">{{ '深圳市' }}</span>
									<image class="imgs bd-r40"
										src="https://cdn.oss.bon-top.cn/static_bc/images/arrows_rig.png"
										mode="aspectFit">
									</image>
									<span class="te-3">{{ detail.address_area[1] }}</span>
								</view>
							</view>
						</view>
						<view class="slot_box pd-20" v-if="detail.express_detail">
							<view class="number_box bd-r20 flex ft-24">
								<image class="imgs bd-r40" :src="detail.express_detail.expressCompanyLogo"
									mode="aspectFit">
								</image>
								<text class="ft-24 c-66 ml-8 mr-8">{{
									detail.express_detail.expressCompanyName + '：' + detail.express_detail.number
									}}</text>
								<up-copy :content="detail.express_detail.number">
									<text class="btnItem c-66">复制</text>
								</up-copy>
							</view>
							<view class="main mt-20">
								<view class="progress-item"
									v-for="(item, index) in detail.express_detail.logisticsTraceDetails" :key="index">
									<view class="flex" style="align-items: stretch;">
										<view class="l">
											<view class="radius flex-center mr-8" :class="{ active: index == 0 }">
												<view class="c"></view>
											</view>
											<view class="line"
												v-if="index < detail.express_detail.logisticsTraceDetails.length - 1">
											</view>
										</view>
										<view class="r"
											:class="{ active: index < detail.express_detail.logisticsTraceDetails.length - 1 }">
											<view class="ft fw-800" v-if="index == 0">{{ item.desc }}</view>
											<view class="ft-24 c-66" v-else>{{ item.desc }}</view>
											<view class="ft-24 c-66 mt-10">{{ item.time_str }}</view>
										</view>
									</view>
									<!-- 									<view class="flex-bwt">
										<view class="l flex">
											<view class="radius flex-center mr-8" :class="{active:index==0}"><view class="c"></view></view>
											<view class="ft fw-800">{{item.desc}}</view>
										</view>
									</view>
									<view class="b flex" :class="{active:index<detail.express_detail.logisticsTraceDetails.length-1}">
										<view style="width: 20rpx;"><view class="line" v-if="index<detail.express_detail.logisticsTraceDetails.length-1"></view></view>
										<view class="c-box">
											<view class="txt ft-22 c-66 mt-10 ml-10">{{item.time_str}}</view>
										</view>
									</view> -->
								</view>
							</view>
						</view>

					</view>

					<view class="form_box_item flex-bwt  pd-20">
						<view class="label">礼品介绍 </view>
						<view class="rig ft-24 c-66">
							<view v-html="detail.des"></view>
						</view>
					</view>
					<view class="rules_box ft-22 c-99 pd-20 bd-r20">
						<view v-html="detail.content"></view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 140rpx;"></view>
		<view class="bottomBtn flex-center">
			<view class="flex" @click="handleContact">
				<image class="wh-28 mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/info.png"></image>
				<view class="ft">联系客服</view>
			</view>
			<view class="line"></view>
			<view class="flex" @click="callTel">
				<image class="wh-28 mr-4" src="https://cdn.oss.bon-top.cn/static_bc/images/order_icon5.png">
				</image>
				<view class="ft">拨打电话</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="js">
import {
	ref,
	reactive
} from 'vue';
import navHead from '@/components/navHead.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad,
} from "@dcloudio/uni-app";

const headData = reactive({
	color: '#fff',
	title: '兑换礼品详情'
})
const form = ref({
	count: 1,
	address: ''
})
const selectAdd = (data) => {
	form.value.address = ''
	closePopup()
}
let showPup = ref(false)
// 关闭弹窗
const closePopup = () => {
	// props.show = false;
	showPup.value = false

};
const showDialog = ref(false)
const close = () => {
	showDialog.value = false
}
const add = () => {
	if (form.value.count < 10) form.value.count++
}
const reduce = () => {
	if (form.value.count > 1) form.value.count--
}
const goPage = (url) => {
	uni.navigateTo({
		url: url
	})
}

const id = ref('')
const detail = ref({})
onLoad((options) => {
	id.value = options?.id || ''
	utils
		.request(
			api.getIntegralOrderDetail, {
			id: id.value,
		},
			"get"
		)
		.then((res) => {
			detail.value = res.data.info
		});
})

//联系客服
const handleContact = () => {
	uni.share({
		provider: "weixin",
		openCustomerServiceChat: true,
		corpid: 'wwc8da87b42ebd46ff', //客服ID
		customerUrl: 'https://work.weixin.qq.com/kfid/kfc76f33e635469a091', //客服的页面路径
	})
}
//拨打电话
const callTel = () => {
	uni.makePhoneCall({
		phoneNumber: '0755-89385111'
	});
}
</script>

<style lang="scss" scoped>
/* 头部与关闭按钮 */
.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom: 1px solid #eee;
	font-size: 28rpx;
	background-color: #F8F8F8;
	border-radius: 40rpx 40rpx 0 0;

	.icons {
		width: 36rpx;
		height: 36rpx;
	}
}

.pop_card_box {
	height: 750rpx;
	background-color: #F8F8F8;

	.pop_card_box_item {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.address_botton {
		background-color: #F1F1F1;
		padding: 20rpx 0;
		margin-bottom: 30rpx;

		.icons {
			width: 32rpx;
			height: 32rpx;
		}
	}



}




.content_box {
	.bg {
		background-color: #F8F8F8;
	}

	.card_box {
		.imgs {
			width: 186rpx;
			height: 232rpx;
		}
	}

	.form_box {
		.form_box_item {
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			.label {
				flex-shrink: 0;
				font-size: 24rpx;
				color: #333;
				font-weight: 800;
				width: 180rpx;
			}

			.rig {
				.intefral_num {
					color: #FF0000;
					font-weight: 800;
				}

			}

			.title {
				.imgs {
					width: 36rpx;
					height: 20rpx;
					flex-shrink: 0;
					margin: 0 10rpx;
				}
			}

			.btnItem {
				padding: 5rpx;
				background-color: #f1f1f1;
				border-radius: 8rpx;
				margin-right: 4rpx;
			}

			.selectAdd {
				text-align: right;

				.icons {
					width: 24rpx;
					height: 24rpx;
					flex-shrink: 0;
					margin: 4rpx 10rpx 0 10rpx;
				}
			}

			.slot_box {
				.number_box {
					height: 74rpx;
					border: 2rpx solid #F1F1F1;
					padding: 0 20rpx;

					.imgs {
						width: 31rpx;
						height: 31rpx;
						flex-shrink: 0;
					}
				}

				.main {
					width: 650rpx;

					.progress-item {
						.radius {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							flex-shrink: 0;
							margin-top: 10rpx;

							.c {
								width: 16rpx;
								height: 16rpx;
								border-radius: 50%;
								background-color: #333333;
							}
						}

						.radius.active {
							background-color: #333333;

							.c {
								width: 12rpx;
								height: 12rpx;
								background: #DBF046;
							}
						}

						.l {
							overflow: hidden;
							width: 20rpx;
							flex-shrink: 0;

							.line {
								width: 2rpx;
								height: 100%;
								background-color: #F1F1F1;
								margin-left: 8rpx;
								margin-right: 8rpx;
								margin-top: 10rpx;
							}
						}

						.r {
							width: 582rpx;
							margin-left: 4rpx;
							word-break: break-all;
						}

						.r.active {
							padding-bottom: 40rpx;
						}
					}
				}

			}
		}

		.rules_box {
			background: linear-gradient(to bottom, #ffffff00, #FFFFFF);
		}

		.pd-noR {
			padding: 15rpx 5rpx 15rpx 20rpx;

			.icons {
				width: 24rpx;
				height: 24rpx;
				flex-shrink: 0;
			}
		}
	}
}

.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 20rpx;
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.line {
		width: 2rpx;
		height: 34rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
		background-color: #F1F1F1;
	}
}

.number_box {
	color: #333;

	.num_count {
		width: 56rpx;
		height: 42rpx;
		border: 2rpx solid #333;
		border-radius: 8rpx;
		// margin: 0 10rpx;
	}

	.btn {
		width: 40rpx;
		height: 100%;
		font-size: 28rpx;
		font-weight: 800;
		// background-color: red;

	}

}

.delete_box {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;


	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #999;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		position: absolute;
		background-color: #fff;
		text-align: center;
		width: 518rpx;
		// height: 386rpx;
		top: calc(50% - (386rpx / 2));
		left: calc(50% - (518rpx / 2));

		.text {
			// padding: 20rpx;
			min-height: 140rpx;
		}

		.btn_model {
			margin-bottom: 30rpx;

			.btn {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
			}
		}
	}

}
</style>